<template>
  <div class="education-page">
    <div class="wrap_education" v-if="$route.name === 'myEducation'">
      <van-cell-group>
        <van-cell
          :title="$t('education.school')"
          :value="school || $t('choice')"
          is-link
          title-class="strong"
          :to="{ name: 'college' }"
          required
        ></van-cell>
        <van-cell
          :title="$t('education.inTake')"
          required
          :value="date || $t('choice')"
          is-link
          title-class="strong"
          @click="pickerBus('enrollmentPicker')"
        ></van-cell>
        <van-cell
          :title="$t('education.degree')"
          :value="degree || $t('choice')"
          is-link
          title-class="strong"
          @click="pickerBus('educationPicker')"
          required
        ></van-cell>
      </van-cell-group>
      <van-popup
        v-model="showPicker"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <div class="content">
          <van-picker
            show-toolbar
            :default-index="defaultIndex"
            :columns="columnData"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          ></van-picker>
        </div>
      </van-popup>
    </div>
    <router-view @schoolName="saveSchoolName"></router-view>
  </div>
</template>

<script>
import { Cell, CellGroup, Popup, Picker } from 'vant';
import enrollment from '@/config/data/adminssion-date.json';
import 'vant/lib/picker/style/less';
import { mapMutations, mapState } from 'vuex';

export default {
    name: 'profile-education',
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Popup.name]: Popup,
        [Picker.name]: Picker
    },
    data () {
        return {
            columnData: [], // picker需要绑定的数据
            defaultIndex: 0, // 默认索引
            showPicker: false, // 是否显示选择器
            degree: '', // 学历
            date: '', // 入学年份
            school: '', // 所在学校
            eduBackground: ['大专', '本科', '研究生', '博士', '博士后'],
            enrollment
        };
    },
    methods: {
        // 保存选中的数据
        onConfirm (value) {
            if (typeof value === 'number') {
                this.date = value;
            } else {
                this.degree = value;
            }
            this.updateTempEducationInfo();
            this.showPicker = false;
        },
        // 保存学校名
        saveSchoolName (value) {
            this.school = value;
            this.updateTempEducationInfo();
        },
        // 选择器控制总线
        pickerBus (pickerName) {
            this.showPicker = true; // 打开选择器
            this.columnData = this[pickerName]();
        },
        // 展示教育背景
        educationPicker () {
            // 切换默认索引
            this.defaultIndex = this.eduBackground.findIndex(d => d === this.degree);
            return this.eduBackground;
        },
        // 展示入学年份
        enrollmentPicker () {
            // 切换默认索引
            this.defaultIndex = this.enrollment.findIndex(d => d === this.date * 1);
            return this.enrollment;
        },
        // 更新临时教育信息
        updateTempEducationInfo () {
            this.overRideValue({
                state: 'tempEducationInfo',
                value: {
                    userId: localStorage.getItem('id'),
                    school: this.school || '',
                    degree: this.degree || '',
                    enrollment: this.date.toString() || ''
                }
            });
        },
        ...mapMutations(['simpleAssignment', 'overRideValue'])
    },
    computed: {
        ...mapState(['educationInfo'])
    },
    watch: {
        // 进入组件后尝试立即从vuex获取educationInfo的教育信息
        educationInfo: {
            handler (value) {
                this.degree = value.degree;
                this.date = value.enrollment;
                this.school = value.school;
            },
            immediate: true
        }
    },
    beforeRouteLeave (to, from, next) {
        this.simpleAssignment({ state: 'tempEducationInfo', value: {} });
        next();
    }
};
</script>
